<template>
    <!-- 编辑角色对话框 -->
    <el-dialog title="编辑角色" v-model="editRoleDialogVisible" width="50%" @close="editRoleDialogClosed">
      <!-- 内容主体区域 -->
      <el-form :model="editFormData" :rules="editFormRules" ref="editRoleFormRef" label-width="80px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="editFormData.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="editFormData.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span class="dialog-footer">
        <el-button @click="resetRoleForm">重置</el-button>
        <el-button @click="editRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editRole">确 定</el-button>
      </span>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { editRoleApi, getRoleInfoByIdApi } from '@/api/role'
  import { message } from '@/utils/functions'
  // 控制对话框的显示与隐藏
  const editRoleDialogVisible = ref(false)
  // 编辑的表单数据
  const editFormData = ref({
    roleId: '',
    roleName: '',
    roleDesc: ''
  })
  // 验证规则
  const editFormRules = ref({
    roleName: [
      { required: true, message: '请输入角色名称', trigger: 'blur' },
      {
        min: 2,
        max: 10,
        message: '角色名称的长度在2-10个字符之间',
        trigger: 'blur'
      }
    ],
    roleDesc: [
      { required: true, message: '请输入角色描述', trigger: 'blur' },
      {
        min: 2,
        max: 15,
        message: '角色描述的长度在2-15个字符之间',
        trigger: 'blur'
      }
    ]
  })
  
  // dom对象
  const editRoleFormRef = ref(null)
  const emit = defineEmits(['getRoleList'])
  // 编辑角色
  const editRole = () => {
    // 1.表单验证
    editRoleFormRef.value.validate(async valid => {
      if (!valid) {
        return
      }
      // 2.表单验证通过
      // 3.调用接口，编辑角色
      await editRoleApi(editFormData.value)
      message('success', '编辑角色成功')
      // 4.关闭对话框
      editRoleDialogVisible.value = false
      // 5.触发父组件的自定义事件，刷新角色列表
      emit('getRoleList')
    })
  }
  
  // 重置表单
  const resetRoleForm = () => {
    editRoleFormRef.value.resetFields()
  }
  // 对话框的关闭
  const editRoleDialogClosed = () => {
    resetRoleForm()
  }
  
  // 对外提供控制对话框的打开方法
  const open = async id => {
    // 根据id获取当前角色信息,并将获取到的角色信息，赋值给表单
    const data = await getRoleInfoByIdApi(id)
    editFormData.value = data
    editRoleDialogVisible.value = true
  }
  // 对外提供控制对话框的关闭方法
  const close = () => {
    editRoleDialogVisible.value = false
  }
  // 在vue2和vue3的早期版本中，默认所有的组件对象成员和属性都会被暴露出去，但是现在默认不会暴露出去，需要使用defineExpose
  // 把需要对外提供使用的成员暴露出去
  defineExpose({
    // editRoleDialogVisible,
    open,
    close
  })
  </script>
  
  <style lang="scss" scoped>
  </style>